import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:gameplay_flutter/lib_runtime/extension/string_extension/string_text.dart';
import 'package:gameplay_flutter/m_room/constants/room_assets.dart';

import '../../m_me/constants/me_assets_constants.dart';

class RoomUser extends StatelessWidget {
  const RoomUser({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.topCenter,
      children: [
        Container(
          margin: EdgeInsets.only(top: 41.h),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.vertical(top: Radius.circular(18.r)),
          ),
          child: SafeArea(
            child: Column(
              children: [
                Container(
                  padding: EdgeInsetsDirectional.only(
                      top: 21.h, start: 15.w, bottom: 21.h),
                  width: double.infinity,
                  alignment: AlignmentDirectional.centerStart,
                  child: Image.asset(RoomAssets.roomReportIcon,
                      width: 18.w, height: 18.h),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    _countWidget("999", "Following", false),
                    _countWidget("9999", "Followers", true),
                    _countWidget("999", "Gifts", false),
                  ],
                ),
                SizedBox(height: 7.h),
                _buildUserNameWidget(),
                SizedBox(height: 4.h),
                "Signature of the individual...".text(
                  fontSize: 11.sp,
                  color: const Color(0xFFC1C1C1),
                ),
                SizedBox(height: 41.h),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    _buildToUser(RoomAssets.roomSendGift, "Send Gifts"),
                    _buildToUser(RoomAssets.roomSendMessage, "Go Chats"),
                    _buildToUser(RoomAssets.roomFollowed, "Unfollow"),
                    _buildToUser(RoomAssets.roomHomepage, "Homepage"),
                  ],
                ),
                SizedBox(height: 8.h),
                _homeownerToUser(),
              ],
            ),
          ),
        ),
        Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(
              color: Colors.white,
              width: 1.0.w,
            ),
          ),
          child: CircleAvatar(
            backgroundColor: Color(0xFFFFFFFF),
            radius: 41.r,
            backgroundImage: const CachedNetworkImageProvider(
                'https://picsum.photos/200/300'),
            // 使用 NetworkImage
            child: true
                ? Image.asset(MeAssetsConstants.iconEmpty) // 如果没有图片，显示加载动画
                : null,
          ),
        ),
      ],
    );
  }

  /// 统计d的数量信息
  Widget _countWidget(String count, String type, bool isCenter) {
    return Container(
      width: 83.w,
      alignment: AlignmentDirectional.center,
      decoration: BoxDecoration(
        border: isCenter
            ? BorderDirectional(
                start: BorderSide(
                  color: const Color(0xFFE4E4E4),
                  width: 0.5.w,
                ),
                end: BorderSide(
                  color: const Color(0xFFE4E4E4),
                  width: 0.5.w,
                ))
            : null,
      ),
      child: Column(children: [
        count.text(
          fontSize: 18.sp,
          color: Colors.black,
        ),
        SizedBox(
          height: 1.h,
        ),
        type.text(
          fontSize: 12.sp,
          color: const Color(0xFFC1C1C1),
        ),
      ]),
    );
  }

  ///  用户名称
  Widget _buildUserNameWidget() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Image.asset(
          RoomAssets.roomUserNv,
          width: 18.w,
          height: 18.h,
        ),
        SizedBox(
          width: 4.w,
        ),
        "User Name".text(
          fontSize: 20.sp,
          color: Colors.black,
          weight: TextFontWeight.medium,
        ),
      ],
    );
  }

  /// 对用户的关注等操作
  Widget _buildToUser(String typeIcon, String typeText) {
    return Column(children: [
      Image.asset(
        typeIcon,
        width: 48.w,
        height: 48.h,
      ),
      SizedBox(
        width: 6.w,
      ),
      typeText.text(
        fontSize: 12.sp,
        color: const Color(0xFFC1C1C1),
      ),
    ]);
  }

  /// 主播对用户的操作
  Widget _homeownerToUser() {
    return Container(
      padding: EdgeInsetsDirectional.symmetric(vertical: 11.h),
      decoration: BoxDecoration(
          border: Border(
        top: BorderSide(
          color: const Color(0xFFF2F2F2),
          width: 1.0.w,
        ),
      )),
      height: 52.w,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Image.asset(
            RoomAssets.roomCloseVoiceIcon,
            width: 30.w,
            height: 30.h,
          ),
          _buildVerticalLine(),
          Image.asset(
            RoomAssets.roomCloseMicIcon,
            width: 30.w,
            height: 30.h,
          ),
          _buildVerticalLine(),
          Image.asset(
            RoomAssets.roomCloseIcon,
            width: 30.w,
            height: 30.h,
          ),
          _buildVerticalLine(),
          Image.asset(
            RoomAssets.roomExtIcon,
            width: 30.w,
            height: 30.h,
          ),
        ],
      ),
    );
  }

  /// 竖线
  Widget _buildVerticalLine() {
    return Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [
            Color(0xFFEDEDED),
            Color(0xFFCBCBCB),
            Color(0xFFEDEDED),
          ],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
      width: 1.w,
    );
  }
}
